<template>
	<view class="announcement-container">
		<view class="announcement-header">
			<view class="announcement-title">{{receivedItem[0].title}}</view>
			<view class="announcement-meta">
				<view class="announcement-type">
					<text class="tag">{{receivedItem[0].type}}</text>
				</view>
				<view class="announcement-time">{{receivedItem[0].updateTime}}</view>
			</view>
		</view>
		<view class="announcement-content">
			<text>{{receivedItem[0].content}}</text>
		</view>
	</view>
</template>

<script>
	import {getArticle} from '@/config/api/article.js';
	export default {
		data() {
			return {
				receivedItem: {}
			}
		},
		async onLoad(options) {
			try {	// 广告
				const res = await getArticle(options)
				if (res && res.data && typeof res.data === 'object' && 'code' in res.data && res.data.code === 200) {
					this.receivedItem = res.data.data
					console.log(this.receivedItem);
				} else {
					console.error('请求失败:', res?.data?.msg || '未知错误');
				}
			} catch (error) {
				console.error('接口异常:', error)
				this.$message.error('数据加载失败')
			}
		}
	}
</script>

<style>
	.announcement-container {
		padding: 20rpx;
	}

	.announcement-header {
		border-bottom: 1rpx solid #e0e0e0;
		padding-bottom: 10rpx;
		margin-bottom: 20rpx;
	}

	.announcement-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.announcement-meta {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.announcement-type {
		background-color: #f5f5f5;
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		margin-right: 10rpx;
	}

	.tag {
		font-size: 24rpx;
		color: #333;
	}

	.announcement-time {
		font-size: 24rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.announcement-views {
		font-size: 24rpx;
		color: #999;
	}

	.announcement-content {
		font-size: 28rpx;
		line-height: 40rpx;
	}
</style>